import React from 'react';
import ReactDOM from 'react-dom';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Button, Spin } from 'antd';

import {
  WeaDialog,
  WeaTextarea,
  WeaLocaleProvider,
  WeaNewScroll,
} from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
@inject('docSubscribeStore')
@observer
class SubscribeDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    const { docSubscribeStore } = this.props;
  }

  componentWillReceiveProps() {
  }

  componentWillUnmount() {
  }
  render() {
    const { docSubscribeStore } = this.props;
    const { setState, dialogVisible, selectedRows, getValue, dialogSubmit, selectedSubject, dialogLoading } = docSubscribeStore;
    const buttons = [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x9bef5@dialogSubmit`} type="primary"
        loading={dialogLoading}
        onClick={() => {
                 dialogSubmit();
               }}
      >{getLabel(725, '提交')}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@t4nmv2@cancel`} type="ghost" onClick={() => setState({ dialogVisible: false })}>{getLabel(31129, '取消')}</Button>),
    ];
    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@rdejd9`}
        title={getLabel(32121, '文档订阅')}
        style={{ width: 580, height: 'auto' }}
        maskClosable={false}
        visible={dialogVisible}
        buttons={buttons}
        onCancel={() => setState({ dialogVisible: false })}
      >

        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@cmdxev`} spinning={dialogLoading} tip={getLabel(385471, '正在提交，请稍后')}>
          <div style={{ padding: 20 }}>
            <table >
              <tr style={{ paddingTop: 10 }} className="subsribe-count">
                <td style={{ width: 100 }}>{getLabel(17517, '文件名称')}</td>
                <td style={{ width: 420 }}>
                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@wn9nqh`}>
                  <div className="doc-subsribe-list"
                    style={{ maxHeight: 200 }}
                  >
                    {selectedSubject && selectedSubject.map((item, index) => (<p>{item}</p>))
                    }
                  </div>
                  </WeaNewScroll>
                  <br />
                  <p>{getLabel(18998, '一共有')}{selectedRows && selectedRows.length}{getLabel(15015, '篇')}</p>
                </td>
              </tr>
              <tr>
                <td style={{ width: 100 }}>{getLabel(18664, '订阅说明')}</td>
                <td style={{ width: 420 }}>
                  <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@vly1sz`} minRows={4}
                    onChange={(value) => {
                    getValue(value);
                  }}
                  />
                </td>
              </tr>
            </table>
          </div>
        </Spin>

      </WeaDialog>
    );
  }
}

export default SubscribeDialog;
